<template>
    <div class="self-feedback">
        <div class="self-feedback-header">
            <van-nav-bar title="意见与反馈" left-text="返回" left-arrow @click-left="$router.back()" flxed />
        </div>
        <div class="self-feedback-top">
            <van-cell-group inset>
                <van-field v-model="message" rows="2" autosize label="留言:" type="textarea" maxlength="150"
                    placeholder="请输入留言" show-word-limit />
            </van-cell-group>
        </div>
        <div class="self-feedback-bottom">
            <van-cell-group inset>
                <van-field v-model="tel" label="手机号" placeholder="输入框内容右对齐" input-align="right" />
            </van-cell-group>
        </div>
        <div class="self-feedback-submit" @click="submitfeedback">
            <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" round>
                提交反馈
            </van-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue' 
import { showToast } from 'vant';
import {submitfeedbackApi} from '@/api/self'
import { useRouter } from 'vue-router';
const message = ref<string>('')
const tel = ref<string>('')
const router =useRouter()
const submitfeedback = async () =>{
    let res =await submitfeedbackApi(message.value,tel.value)
    if (res.data == true) {
        showToast({
            message: '反馈提交成功哦,稍后将与您联系^_^',
            icon: 'smile-o',
        });
        router.push({name:'home'})
    } else {
        showToast({
            message: '添加地址失败啦~~',
            icon: 'flower-o',
        });
    }
}
</script>

<style  lang="scss">
.self-feedback {
    .self-feedback-top {
        width: 3.36rem;
        height: 2.30rem;
        padding: 10px;
        background: #fff;
        margin: 0 auto;
        margin-top: 30px;

    }

    .self-feedback-bottom {
        width: 3.36rem;
        padding: 10px;
        background: #fff;
        margin: 0 auto;
        margin-top: 30px;

    }
    .self-feedback-submit {
        width: 3.36rem;
        padding: 10px;
        background: #fff;
        margin: 0 auto;
        margin-top: 30px;
        .van-button{
            width: 100%;
        }

    }

    .van-cell-group {
        height: 100%;
        .van-cell {
        height: 100% !important;

        .van-cell__value {
            display: flex !important;
            flex-direction: column !important;
            justify-content: space-between !important;
        }
    }
    }

   

}
</style>